
<template>
  <a-drawer :visible="visible"
            :title="title"
            placement="right"
            :destroyOnClose="true"
            @close="onClose"
            class="helper">
    <template v-for="(helper, index) in helpInfoList">
      <div :key="index"
           class="helper-item">
        <div v-if="helper.link">
          <a :href="helper.link"
             class="helper-item-link"
             target="_blank">
            {{ helper.content }}
          </a>
        </div>
        <template v-else>
          <div class="helper-item-title">{{ helper.title }}</div>
          <div class="helper-item-content">{{ helper.content }}</div>
        </template>
      </div>
    </template>
  </a-drawer>
</template>

<script>

import PropType from '@zh/common-utils/prop-types'
import { getHelpers } from '../api/helper'

export default {
  name: 'ZHelper',
  props: {
    parentVM: PropType.object.require(),
    url: PropType.string.def(undefined),
    title: PropType.string.def('帮助中心')
  },
  data () {
    return {
      visible: true,
      helpInfoList: []
    }
  },
  created () {
    getHelpers(this.url || this.$route.meta.realPath).then(response => {
      this.helpInfoList = response.map(item => {
        if (item.link && !item.link.startsWith('http://') && !item.link.startsWith('https://')) {
          item.link = `${process.env.VUE_APP_HELPER_LINK_BASE_URL}/${item.link}`
        }
        return item
      })
    })
  },
  mounted () {
    this.parentVM.$vnode.elm.appendChild(this.$el)
  },
  methods: {
    onClose () {
      this.visible = false
      setTimeout(() => {
        this.$destroy()
      }, 300)
    }
  }
}
</script>

<style lang="less" scoped>
.helper-item {
  &-title {
    font-weight: bold;
    margin: 6px 0;
  }
  &-content {
    color: #8c8c8c;
  }
  > div {
    .helper-item-link {
      margin: 10px 0;
      color: #2e8e45;
      display: inline-block;
    }
  }
}
</style>